<template>
  <div class="about">
    <div class="image_container">
      <img :src="imageList[defultIndex]" />
    </div>
    <div class="image_list_container">
      <div class="image_list_left" @click="onClickLeft">
        <i class="el-icon-arrow-left"></i>
      </div>
      <div class="image_list_center">
        <div class="imgae_list_center_wrapper" ref="wrapper">
          <img
            v-for="(item,index) in imageList"
            :key="index"
            :src="item"
            ref="image"
            :class="{'image_active':defultIndex===index}"
            @mouseenter="onMouseEnter(index)"
          />
        </div>
      </div>

      <div class="image_list_right" @click="onClickRight">
          <i class="el-icon-arrow-right"></i>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      imageList: [
        "http://localhost:8080/素材/img/1.jpg",
        "http://localhost:8080/素材/img/2.jpg",
        "http://localhost:8080/素材/img/3.jpg",
        "http://localhost:8080/素材/img/4.jpg",
        "http://localhost:8080/素材/img/5.jpg",
        "http://localhost:8080/素材/img/16.jpg",
        "http://localhost:8080/素材/img/11.jpg",
        "http://localhost:8080/素材/img/12.jpg",
        "http://localhost:8080/素材/img/16.jpg",
        "http://localhost:8080/素材/img/13.jpg",
        "http://localhost:8080/素材/img/14.jpg",
        "http://localhost:8080/素材/img/mi6.jpg",
        "http://localhost:8080/素材/img/note.jpg",
        "http://localhost:8080/素材/img/photo.jpg",
        "http://localhost:8080/素材/img/zipai.jpg",
        "http://localhost:8080/素材/img/pingheng.jpg",
        "http://localhost:8080/素材/img/6.jpg",
        "http://localhost:8080/素材/img/10.jpg"
      ],
      defultIndex: 0
    };
  },
  methods: {
    onClickRight() {
      this.defultIndex += 3;
      if (this.defultIndex >= this.imageList.length) {
        this.defultIndex = this.imageList.length - 1;
      }
      console.log(this.defultIndex);
      var tempImages = this.$refs.image;
      tempImages[this.defultIndex].scrollIntoView({
        behavior: "smooth",
        inline: "start"
      });
    },
    onClickLeft() {
      this.defultIndex -= 3;
      if (this.defultIndex <= 0) {
        this.defultIndex = 0;
      }
      var tempImages = this.$refs.image;
      tempImages[this.defultIndex].scrollIntoView({
        behavior: "smooth",
        inline: "end"
      });
    },
    onMouseEnter(index) {
      this.defultIndex = index;
    }
  },
  mounted() {
    console.log(this.$route);
  }
};
</script>

<style>
.image_container {
  width: 500px;
  height: 500px;
  margin: auto;
  text-align: center;
  border: 1px solid black;
}

.image_container img {
  width: 360px;

}

.image_list_container {
  margin-left: 710px;
  width: 500px;
  height: 125px;
  border: 1px solid black;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}

.image_list_left,
.image_list_right {
  width: 10%;
  height: 100%;
}

.image_list_center {
  width: 100%;
  height: 100%;
  overflow: scroll;
}

.imgae_list_center_wrapper {
  height: 100px;
  display: inline-flex;
  justify-content: flex-start;
  align-items: center;
}

.imgae_list_center_wrapper img {
  width: 33%;
  height: 100px;
}

.image_active {
  border: 1px solid red;
}
.el-icon-arrow-left{
    color: grey;
    font-size: 60px;
    line-height: 100px;
}
.el-icon-arrow-right{
    color: grey;
    font-size: 60px;
    line-height: 100px;
}
</style>